<template>
  <div>
    <head-nav :isBack="isBack"></head-nav>
    <!-- 占位 -->
    <div class="zanwei-top"></div>
    <div class="rap_goodslist">
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <li v-for="(item,index) in rows" :key="index">
          <!-- <router-link class="rap_rout" :to="{path:'/faddishdetail'}" tag="div"> -->
          <div class="rap_rout" @click="goDetailFn(item.ID)">
            <div class="list_l">
              <div class="rap_ph">
                <img :src="item.TP[0]" />
              </div>
              <div class="rap_cont">
                <div class="tit">{{item.SPMC}}</div>
                <div class="price">
                  <span :style="textColor">¥{{item.XJ}}</span>
                  <span v-if="item.JE && item.XJ!=item.JE && item.JE!=null">原价:¥{{item.JE}}</span>
                </div>
                <span :style="textColor">(库存{{item.KC}})</span>
								<!-- <div class="ms" v-html="item.MSTEXT"></div> -->
								<!--<p class="ms2" v-if="item.XGCS > 0">数量限制{{item.XGCS}}，{{item.XJ}}元抢购</p>
                <p class="ms2" v-else>{{item.XJ}}元抢购</p>-->
              </div>
            </div>
            <div class="rap_xqbtn" :style="backgroundColor">立即抢购</div>
            <!-- </router-link> -->
          </div>
        </li>
      </ul>
    </div>
    <div class="list-loading" v-if="loading">
        <i class="iconfont icon-loading"></i> 加载中...
      </div>
      <div v-else>
        <div v-if="forbid" class="forbid">
          没有更多了...
        </div>
      </div>
    <!--底部占位-->
    <div class="zanwei-bottom"></div>
  </div>
</template>

<script>
  import api from '@/api/api'
  import {
    Toast,
    MessageBox
  } from 'mint-ui';

  export default {
    data() {
      return {
        isBack:false,
        loading: true,
        num: 1,
        numSize: 8,
        rows: [],
        forbid: false,
        jfhlfl: '8a818949640307680164030768990001',
        sort: 'YSSL',
        orderby: 'DESC'
      }
    },
    methods: {
      loadMore() {
        this.num++
          if (this.forbid) {
            return false
          }
        this.loading = true;

        this.getListDataFn(this.jfhlfl, this.numSize, this.num, this.sort, this.orderby);
        console.log(this.num)
        // this.loading = false;
      },
      getListDataFn(jfhlfl, row, num, sort, orderby) {
        let page = this
        api.scoreToGift(page, jfhlfl, row, num, cb, /*sort, orderby*/)

        function cb(res) {

          if (res.code == 0) {
          	
            let data = JSON.parse(res.data)
            console.log(data)
            console.log(data.rows)
            if (data.rows.length !== 0) {
              let rows = data.rows.map(y => {
                let TP = y.TP.map(x => {
                  return page.host.filehost + x
                })
                y.TP = TP
                return y
              })
              page.rows = page.rows.concat(rows)
            } else {
              page.forbid = true
            }

          } else {
            Toast({
              message: res.msg,
              duration: 3000
            });
          }
          setTimeout(function () {
            page.loading = false;
          }, 1000)
        }
      },
      goDetailFn(id) {
        let page = this;
        var userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
        // if (userinfo.vipcode) {
        // 	this.$router.push('/faddishdetail/'+id)
        // } else {
        // 		Toast({
        // 				message: '您还不是会员，快去注册吧！',
        // 				duration: 2000
        // 		});
        // 		setTimeout(function () {
        // 				page.$router.push('/register')
        // 		}, 2000)
        // }
        // 检查过期
        if (userinfo && userinfo.vipcode) {
          let userId = userinfo.vipcode;
          if (!this.$util.checkValidity()) return
          api.scoreToGiftDetail(page, userId, id, cb);
          function cb(res) {
            if (res.code !== 0) {
              Toast({
                  message: res.msg,
                  duration: 2000
              });
              setTimeout(function () {
                page.rows = [];
                page.getListDataFn(page.jfhlfl, page.numSize, page.num, page.sort, page.orderby);
              },1000);
            } else {
              page.$router.push('/faddishdetail/' + id)
            }
          }
        }else{
          page.$router.push('/faddishdetail/' + id)
        }
      }
    },
    mounted() {
      let page = this;
			page.getListDataFn(page.jfhlfl, page.numSize, page.num, page.sort, page.orderby);

    }
  }

</script>

<style lang="less">

    .forbid {
    padding: 0.2rem;
    text-align: center;
  }
  .rap_goodslist {
    ul {
      li {
        padding: 0.2rem 0 0.1rem 0;
        border-bottom: 0.01rem solid #e2e2e2;
        .rap_rout {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .list_l {
          display: flex;
        }
        .rap_ph {
          border-radius: 0.06rem;
          margin: 0 0.15rem 0 0.1rem;
          img {
            width: 1.48rem;
            height: 1.48rem;
            border-radius: 0.06rem;
          }
        }
        .rap_cont {
					width: 4.1rem;
          div {
            color: #333;
          }
          span {
            font-size: 0.28rem;
            color: #F05DC4;
            line-height: 0.36rem;
            margin-top: 0.12rem;
            display: block;
          }
          p {
            font-size: 0.28rem;
            color: #bdbdbd;
            line-height: 0.36rem;
          }
          .tit {
            font-size: 0.3rem;
            font-weight: bold;
            line-height: 0.46rem;
          }
          .ms {
            font-size: 0.28rem;
            line-height: 0.36rem;
            margin-top: 0.12rem;
            width: 4.1rem;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            & > * {
              padding: 0 !important;
              margin: 0 !important;
              font-size: 0.28rem !important;
              color: #bdbdbd !important;
              line-height: 0.36rem !important;
            }
          }
          .ms2 {
            margin-top: 0.12rem;            
          }
          .price {
            display: flex;
            justify-content: space-between;
            span {
              &:nth-child(2) {
                text-decoration: line-through;
                color: #999999;
                margin-right: 0.4rem;
              }
            }
          }
        }
        .rap_xqbtn {
          width: 1.42rem;
          height: 0.4rem;
          color: #fff;
          font-size: 0.24rem;
          text-align: center;
          line-height: 0.4rem;
          background-color: #F05DC4;
          border-radius: 0.1rem;
          margin-right: 0.2rem;
        }
      }
    }
  }

</style>
